<template>
    <table v-if="accountsInfoList.length > 0" class="merchant-accountT-table c-table mul-th" cellspacing="0">
        <tbody>
        <template v-for="item in accountsInfoList">
            <tr>
                <td :rowspan="Math.ceil(item[listKey].length/pubRowCount)">
                    <span v-if="hasCheckFuc"
                          class="c-checkbox"
                          :class="{checked: isCheckedMerchant(item)}"
                          @click="checkedMerchant(item)"> {{ item[mainKey] }}</span>
                    <span v-else>{{ item[mainKey] }}</span>
                    <div v-if="hasTiming" class="timing-wrap">
                        <input class="timing-input" type="text" v-timing="item"/>
                        <a class="timing" :class="{seted: item.startTime}" href="javascript:">{{ item.startTime ? '修改' : '定时' }}</a>
                    </div>
                </td>
                <td v-for="i in pubRowCount">
                    <span v-if="hasCheckFuc && item[listKey].length > i-1"
                          class="c-checkbox"
                          :class="{checked: item[listKey][i-1][selectedKey]}"
                          @click="$set(item[listKey][i-1], selectedKey, !item[listKey][i-1][selectedKey])"> {{ item[listKey].length > i-1 ? item[listKey][i-1][subKey] : '--' }}</span>
                    <span v-else>{{ item[listKey].length > i-1 ? item[listKey][i-1][subKey] : '--' }}</span>
                    <div v-if="hasTiming" class="timing-wrap">
                        <input class="timing-input" type="text" v-timing="item[listKey][i-1]"/>
                        <a class="timing" :class="{seted: item[listKey][i-1].startTime}" href="javascript:">{{ item[listKey][i-1].startTime ? '修改' : '定时' }}</a>
                    </div>
                    <span v-if="hasTiming && item[listKey][i-1].startTime" class="time-seted">{{ item[listKey][i-1].startTime + ' 至 ' + item[listKey][i-1].endTime }}</span>
                </td>
            </tr>
            <tr v-if="item[listKey].length > pubRowCount" v-for="rowNo in Math.ceil((item[listKey].length-pubRowCount)/pubRowCount)">
                <td v-for="i in pubRowCount">
                    <span v-if="hasCheckFuc && item[listKey].length>rowNo*pubRowCount+i-1"
                          class="c-checkbox"
                          :class="{checked: item[listKey][rowNo*pubRowCount+i-1][selectedKey]}"
                          @click="$set(item[listKey][rowNo*pubRowCount+i-1], selectedKey, !item[listKey][rowNo*pubRowCount+i-1][selectedKey])"> {{ item[listKey].length>rowNo*pubRowCount+i-1 ? item[listKey][rowNo*pubRowCount+i-1][subKey] : '--' }}</span>
                    <span v-else>{{ item[listKey].length>rowNo*pubRowCount+i-1 ? item[listKey][rowNo*pubRowCount+i-1][subKey] : '--' }}</span>
                    <div v-if="hasTiming" class="timing-wrap">
                        <input class="timing-input" type="text" v-timing="item[listKey][rowNo*pubRowCount+i-1]"/>
                        <a class="timing" :class="{seted: item[listKey][rowNo*pubRowCount+i-1].startTime}" href="javascript:">{{ item[listKey][rowNo*pubRowCount+i-1].startTime ? '修改' : '定时' }}</a>
                    </div>
                    <span v-if="hasTiming && item[listKey][rowNo*pubRowCount+i-1].startTime" class="time-seted">{{ item[listKey][rowNo*pubRowCount+i-1].startTime + ' 至 ' + item[listKey][rowNo*pubRowCount+i-1].endTime }}</span>
                </td>
            </tr>
        </template>
        </tbody>
    </table>
</template>

<script>
    import '@/module/laydate';
    import { timeFormat } from '@/module/tools';
    export default {
        name: 'merchantAccountTable',
        props: {
            hasCheckFuc: { type: Boolean, default: true },
            accountsInfoList: { type: Array, required: true },
            pubRowCount: { type: Number, default: 2 },
            listKey:     { type: String, default: 'weChatPublics'},
            mainKey:     { type: String, default: 'nickName'},
            subKey:      { type: String, default: 'nickName'},
            selectedKey: { type: String, default: 'added'},
            hasTiming:   { type: Boolean, default: false},
        },
        methods: {
            checkedMerchant(item){
                if(this.isCheckedMerchant(item)){
                    item[this.listKey].forEach(
                        (citem) => {
                            this.$set(citem, this.selectedKey, false);
                        }
                    );
                }else{
                    item[this.listKey].forEach(
                        (citem) => {
                            this.$set(citem, this.selectedKey, true);
                        }
                    );
                }
            },
            isCheckedMerchant(item){
                for(let i = 0; i < item[this.listKey].length; i++){
                    if(! item[this.listKey][i][this.selectedKey]){
                        return false;
                    }
                }
                return true;
            }
        },
        directives: {
            timing: {
                inserted: (el, binding, vnode) => {
                    laydate.render({
                        elem: el,
                        eventElem: el.nextElementSibling,
                        range: true,
                        type: 'datetime',
                        min: timeFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
                        btns: ['clear', 'confirm'],
                        done: value => {
                            let startTime, endTime;
                            if(value){
                                startTime = value.split(' - ')[0];
                                endTime = value.split(' - ')[1];
                            }else{
                                startTime = '';
                                endTime = '';
                            }

                            let $this = vnode.context;
                            $this.$set(binding.value, 'startTime', startTime);
                            $this.$set(binding.value, 'endTime', endTime);
                            if(binding.value[$this.listKey]){
                                binding.value[$this.listKey].forEach(
                                    item => {
                                        $this.$set(item, 'startTime', startTime);
                                        $this.$set(item, 'endTime', endTime);
                                    }
                                )
                            }
                        }
                    });
                }
            }
        },
    }
</script>

<style lang="scss">
    .merchant-accountT-table{
        text-align: left;
        td{position: relative;}
        .timing-input{width: 0;padding: 0;border: 0;height: 14px;}
        .timing-wrap{float: right;}
        .timing.seted{color: #00a0ff;}
        .time-seted{position: absolute;left: 100%;margin-left: 10px;white-space: nowrap;}
    }
</style>
